<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉中旅游 - 个人中心</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/profile.css" rel="stylesheet">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header id="navbar" class="navbar">
        <div class="container">
            <div class="navbar-container">
                <a href="index.html" class="logo">
                    <img src="images/logo.png" alt="汉中旅游Logo">
                    <span class="logo-text">汉中旅游</span>
                </a>
                
                <!-- 桌面导航 -->
                <nav class="nav-links">
                    <a href="index.html" class="nav-link">首页</a>
                    <div class="dropdown">
                        <a href="scenic.html" class="nav-link">
                            景点介绍
                            <i class="fa fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="scenic.html#zhongnan">古汉台</a>
                            <a href="scenic.html#libai">武侯祠</a>
                            <a href="scenic.html#taibai">张良庙</a>
                        </div>
                    </div>
                    <a href="routes.html" class="nav-link">旅游线路</a>
                    <a href="guide.html" class="nav-link">旅游攻略</a>
                    <a href="food.html" class="nav-link">美食推荐</a>
                    <a href="culture.html" class="nav-link">汉文化活动</a>
                    <div class="dropdown">
                        <a href="#" class="nav-link">
                            更多
                            <i class="fa fa-chevron-down"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a href="contact.html">联系我们</a>
                            <a href="faq.html">常见问题</a>
                            <a href="login.html" class="login-link">登录/注册</a>
                        </div>
                    </div>
                    <!-- 用户信息区域 -->
                    <div class="user-info" style="display: none;">
                        <div class="dropdown">
                            <a href="#" class="nav-link user-link">
                                <img src="images/avatar.jpg" alt="用户头像" class="user-avatar">
                                <span class="username">用户名</span>
                                <i class="fa fa-chevron-down"></i>
                            </a>
                            <div class="dropdown-menu">
                                <a href="profile.html">个人中心</a>
                                <a href="orders.html">我的订单</a>
                                <a href="#" class="logout-link">退出登录</a>
                            </div>
                        </div>
                    </div>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="menu-toggle">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="mobile-menu">
            <div class="mobile-menu-container">
                <a href="index.html">首页</a>
                <div class="mobile-dropdown">
                    <button class="mobile-dropdown-toggle">
                        景点介绍
                        <i class="fa fa-chevron-down"></i>
                    </button>
                    <div class="mobile-dropdown-menu">
                        <a href="scenic.html#zhongnan">古汉台</a>
                        <a href="scenic.html#libai">武侯祠</a>
                        <a href="scenic.html#taibai">张良庙</a>
                    </div>
                </div>
                <a href="routes.html">旅游线路</a>
                <a href="guide.html">旅游攻略</a>
                <a href="food.html">美食推荐</a>
                <a href="culture.html">汉文化活动</a>
                <div class="mobile-dropdown">
                    <button class="mobile-dropdown-toggle">
                        更多
                        <i class="fa fa-chevron-down"></i>
                    </button>
                    <div class="mobile-dropdown-menu">
                        <a href="contact.html">联系我们</a>
                        <a href="faq.html">常见问题</a>
                        <a href="login.html">登录/注册</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main>
        <!-- 页面标题 -->
        <section class="page-header">
            <div class="container">
                <h1 class="page-title">个人中心</h1>
                <p class="page-description">管理您的个人信息和账户设置</p>
            </div>
        </section>

        <!-- 个人信息表单 -->
        <section class="section">
            <div class="container">
                <div class="profile-grid">
                    <!-- 个人信息 -->
                    <div class="profile-section">
                        <h2 class="section-title">个人信息</h2>
                        
                        <!-- 头像上传部分 -->
                        <div class="avatar-section text-center">
                            <h3 class="avatar-title">头像设置</h3>
                            <div class="avatar-content">
                                <div>
                                    <img class="avatar-preview" src="images/avatar.jpg" alt="用户头像">
                                </div>
                                <div class="avatar-upload-buttons">
                                    <input type="file" id="avatar" name="avatar" accept="image/*" style="display: none;">
                                    <label for="avatar" class="upload-button">选择头像</label>
                                    <button type="button" id="upload-avatar" class="button">上传头像</button>
                                </div>
                            </div>
                        </div>

                        <form id="profile-form" class="profile-form text-center">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" id="username" name="username" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="trueName">真实姓名</label>
                                <input type="text" id="trueName" name="trueName">
                            </div>
                            
                            <div class="form-group">
                                <label for="sex">性别</label>
                                <select id="sex" name="sex" required>
                                    <option value="male">男</option>
                                    <option value="female">女</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="birthday">生日</label>
                                <input type="date" id="birthday" name="birthday">
                            </div>
                            
                            <div class="form-group">
                                <label for="adress">地址</label>
                                <input type="text" id="adress" name="adress">
                            </div>
                            
                            <div class="form-group">
                                <label for="phone">手机号码</label>
                                <input type="tel" id="phone" name="phone" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="email">电子邮箱</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                            
                            <button type="submit" class="button">保存修改</button>
                        </form>
                    </div>

                    <!-- 其他设置 -->
                    <div class="profile-section">
                        <h2 class="section-title">账户设置</h2>
                        <div class="settings-list">
                            <a href="#" class="settings-item">
                                <i class="fa fa-lock"></i>
                                <span>修改密码</span>
                                <i class="fa fa-chevron-right"></i>
                            </a>
                            <a href="#" class="settings-item">
                                <i class="fa fa-bell"></i>
                                <span>消息通知</span>
                                <i class="fa fa-chevron-right"></i>
                            </a>
                            <a href="#" class="settings-item">
                                <i class="fa fa-shield"></i>
                                <span>隐私设置</span>
                                <i class="fa fa-chevron-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <!-- 关于我们 -->
                <div class="footer-section">
                    <h3 class="footer-title">关于我们</h3>
                    <p class="footer-text">汉中旅游网致力于为游客提供全面、准确的汉中旅游信息，帮助您规划完美的汉中之旅。</p>
                    <div class="social-links">
                        <a href="#"><i class="fa fa-weibo"></i></a>
                        <a href="#"><i class="fa fa-wechat"></i></a>
                        <a href="#"><i class="fa fa-instagram"></i></a>
                        <a href="#"><i class="fa fa-youtube-play"></i></a>
                    </div>
                </div>
                
                <!-- 快速链接 -->
                <div class="footer-section">
                    <h3 class="footer-title">快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="scenic.html">景点介绍</a></li>
                        <li><a href="routes.html">旅游线路</a></li>
                        <li><a href="guide.html">旅游攻略</a></li>
                        <li><a href="food.html">美食推荐</a></li>
                        <li><a href="culture.html">汉文化活动</a></li>
                    </ul>
                </div>
                
                <!-- 联系我们 -->
                <div class="footer-section">
                    <h3 class="footer-title">联系我们</h3>
                    <ul class="footer-links">
                        <li>
                            <i class="fa fa-map-marker"></i>
                            <span>陕西省汉中市汉台区东大街1号</span>
                        </li>
                        <li>
                            <i class="fa fa-phone"></i>
                            <span>0916-12345678</span>
                        </li>
                        <li>
                            <i class="fa fa-envelope"></i>
                            <span>info@hanzhongtourism.com</span>
                        </li>
                        <li>
                            <i class="fa fa-clock-o"></i>
                            <span>周一至周日 9:00-18:00</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 下载应用 -->
                <div class="footer-section">
                    <h3 class="footer-title">下载我们的应用</h3>
                    <p class="footer-text">扫描微信二维码下载汉中旅游App，随时随地获取旅游信息</p>
                    <div class="qr-code">
                        <img src="images/qrcode.png" alt="下载二维码">
                    </div>
                    <div class="app-links">
                        <a href="#"><i class="fa fa-apple"></i></a>
                        <a href="#"><i class="fa fa-android"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p class="copyright">© 2025 汉中旅游网 版权所有 | 陕ICP备12345678号</p>
                <div class="footer-links">
                    <a href="#">隐私政策</a>
                    <a href="#">使用条款</a>
                    <a href="#">网站地图</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="back-to-top">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/script.js"></script>
    <script src="js/user.js"></script>
    <script src="js/profile.js"></script>
</body>
</html> 